*{
  padding: 0;
  margin: 0;
  user-select: none;
}

body{
  width: 100vw;
  height: 100vh;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
}

$text:'AVAILABLE NOW';
$base_width:1920;
$base_height:938;


@function pxToVw($px){
  @return ($px/$base_width)*100vw;
}
@function pxToVh($px){
  @return ($px/$base_height)*100vh;
}


.container,.container2{
  position: relative;
  width: auto;
  height: auto;
  padding: 40px 50px;
  border-radius:10px 0 0 0;
  cursor:pointer;
  font: 3.5em/1em 'MedievalSharp',cursive;
  color: transparent;
  letter-spacing: 4px;
  background: linear-gradient(45deg,transparent .5%,#000 1%,#00e6f6 5%,#000 5%,);
  border: 1px solid #00E6f6;
  box-shadow:6px 0 0 #00E6f6;

  &::before{
    content:$text;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: red;
    text-shadow:3px 0 0 red;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    filter: contrast(2);
    z-index: 10;
    animation: move_text .85s steps(2,end) infinite;
  }

  &::after{
    content:$text;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: cyan;
    text-shadow:-3px 0 0 cyan;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    filter: contrast(2);
    mix-blend-mode: lighten;
    z-index: 10;
    animation: move_text 2.15s steps(2,end) infinite;

  }

  .line{
    position: absolute;
    width: 95%;
    height: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: #000;
    z-index: 20;
    animation: move_line 5s steps(3,end) infinite;

  }

  &:hover{
    animation: move_text 1.95s infinite;
  }
}

.container2{
  display: inline-block;
  position: fixed;
  left: pxToVw(100);
  top: pxToVh(100);
  border: none;
  background: transparent;
  box-shadow: none;
  &::before{content:'404'}
  &::after{content:'404'}
}

@keyframes move_line{
  0%{top: 50%;}
  10%{top: 20%;}
  20%{top: 70%;}
  30%{top: 30%;}
  40%{top: 40%;}
  50%{top: 50%;}
  60%{top: 70%;}
  70%{top: 30%;}
  80%{top: 35%;}
  90%{top: 40%;}
  100%{top: 50%;}
}

@keyframes move_text{
  0%{transform: translate(-2px,2px);}
  6%{transform: translate(2px,-2px);}
  10%{transform: translate(-2px,2px);}
  18%{transform: translate(-2px,2px);}
  25%{transform: translate(2px,2px);}
  38%{transform: translate(2px,-2px);}
  49%{transform: translate(3px,-1px);}
  57%{transform: translate(0);}
  69%{transform: translate(-1px,1px);}
  76%{transform: translate(0);}
  83%{transform: translate(1px,1px);}
  95%{transform: translate(2px,-1px);}
  99%{transform: translate(1px,1px);}
}